<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px;}
        #shape{
            width: 100px;height: 100px;
            padding: 10px;
            border: 10px black solid;
            margin: 10px;
            float: left;
            /* border-radius: 50%;
            shape-outside: margin-box; 以margin区域进行环绕处理 */
            background: red;
            clip-path: polygon(0 0,0 100px,100px 0);
            shape-outside: polygon(0 0,0 100px,100px 0);
            shape-margin: 10px;
        }
    </style>
</head>
<body>
    <!--环绕文字特性-->
    <div id="parent">
        <div id="shape">aaaaaaaaa</div>
            介绍项目，难点，项目的一些功能
            CSS 可以继承的属性
            手写：三栏布局的实现，尽可能多的方法
            移动端适配的具体原理（rem，px2rem，计算方式
            移动端 1px 问题
            节流、防抖的区别
            z-index 计算方式
            Vue 组件之间的通信方式
            宏任务，微任务
            Vue $NextTick 的实现原理
            两个 tab 的页面之间怎么通信？
            webpack 的运行机制
            webpack 热更新的原理
            == 的类型转换机制
    </div>
</body>
</html>